<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Pc extend【Professional edition】 | MuiPlayer</title>
    <meta name="generator" content="VuePress 1.8.2">
    <link rel="icon" href="/favicon.ico">
    <link rel="manifest" href="/manifest.json">
    <link rel="stylesheet" href="/css/mui-player.min.css">
    <link rel="stylesheet" href="/css/swiper.min.css">
    <link rel="stylesheet" href="/css/CommentCoreLibrary.min.css">
    <link rel="apple-touch-icon" href="https://muiplayer.oss-cn-shanghai.aliyuncs.com/static/image/logo_solid.png">
    <script src="https://www.googletagmanager.com/gtag/js?id=G-X4RSEE27EY"></script>
    <script>
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());

            gtag('config', 'G-X4RSEE27EY');
        </script>
    <script src="/plugin/flv.min.js"></script>
    <script src="/plugin/hls.min.js"></script>
    <script src="/js/mui-player.min.js"></script>
    <script src="/js/CommentCoreLibrary.min.js"></script>
    <script src="/js/swiper.min.js"></script>
    <script src="/js/axios.min.js"></script>
    <meta name="description" content="Mui Player is an excellent HTML5 web page video player framework, providing fullscreen play, fast forward play, video danmaku, decoding and other most commonly used video play functions">
    <meta name="charset" content="utf-8">
    <meta name="baidu-site-verification" content="code-AdGRxnQ9NZ">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta property="og:site_name" content="MuiPlayer">
    <meta property="og:type" content="article">
    <meta property="og:image" content="https://muiplayer.oss-cn-shanghai.aliyuncs.com/static/image/mobile_preview.png">
    <meta name="theme-color" content="#FFFFFF">
    <meta property="og:title" content="">
    <meta property="og:description" content="Mui Player is an excellent HTML5 web page video player framework, providing fullscreen play, fast forward play, video danmaku, decoding and other most commonly used video play functions">
    <meta property="og:url" content="https://muiplayer.js.org/">
    <meta property="og:locale" content="en-US">
    <meta property="twitter:title" content="">
    <meta property="twitter:description" content="Mui Player is an excellent HTML5 web page video player framework, providing fullscreen play, fast forward play, video danmaku, decoding and other most commonly used video play functions">
    <meta name="keywords" content="HTML5 video, player, hls, danmaku, adaptive-bitrate, muiplayer">
    
    <link rel="preload" href="/assets/css/0.styles.ae6ed136.css" as="style"><link rel="preload" href="/assets/js/app.3641bd26.js" as="script"><link rel="preload" href="/assets/js/23.35f66f6c.js" as="script"><link rel="preload" href="/assets/js/3.67a24b41.js" as="script"><link rel="preload" href="/assets/js/37.262c376a.js" as="script"><link rel="preload" href="/assets/js/15.78fdfcaf.js" as="script"><link rel="prefetch" href="/assets/js/1.54927c41.js"><link rel="prefetch" href="/assets/js/10.dd4adaf8.js"><link rel="prefetch" href="/assets/js/11.ea997365.js"><link rel="prefetch" href="/assets/js/12.01af38a6.js"><link rel="prefetch" href="/assets/js/13.75800705.js"><link rel="prefetch" href="/assets/js/14.9fc60c4c.js"><link rel="prefetch" href="/assets/js/16.0101612c.js"><link rel="prefetch" href="/assets/js/17.a9b41ba5.js"><link rel="prefetch" href="/assets/js/18.a55912b8.js"><link rel="prefetch" href="/assets/js/19.13ce6fb6.js"><link rel="prefetch" href="/assets/js/20.57cf3163.js"><link rel="prefetch" href="/assets/js/21.a9f966ac.js"><link rel="prefetch" href="/assets/js/22.65e9060e.js"><link rel="prefetch" href="/assets/js/24.3adbb4ca.js"><link rel="prefetch" href="/assets/js/25.00421a1d.js"><link rel="prefetch" href="/assets/js/26.ba6e1ac8.js"><link rel="prefetch" href="/assets/js/27.4e1b228b.js"><link rel="prefetch" href="/assets/js/28.2d7617cb.js"><link rel="prefetch" href="/assets/js/29.ff74fd8e.js"><link rel="prefetch" href="/assets/js/30.ff8d825c.js"><link rel="prefetch" href="/assets/js/31.daa6ba5b.js"><link rel="prefetch" href="/assets/js/32.9eac0031.js"><link rel="prefetch" href="/assets/js/33.32a2153a.js"><link rel="prefetch" href="/assets/js/34.da24de19.js"><link rel="prefetch" href="/assets/js/35.c97bfd00.js"><link rel="prefetch" href="/assets/js/36.3fd6a073.js"><link rel="prefetch" href="/assets/js/38.2bd8c4ba.js"><link rel="prefetch" href="/assets/js/39.618c3695.js"><link rel="prefetch" href="/assets/js/4.9edd66f8.js"><link rel="prefetch" href="/assets/js/40.0502620b.js"><link rel="prefetch" href="/assets/js/41.9a3bd9b3.js"><link rel="prefetch" href="/assets/js/42.8ac30a45.js"><link rel="prefetch" href="/assets/js/43.e3fc5609.js"><link rel="prefetch" href="/assets/js/44.9acf05da.js"><link rel="prefetch" href="/assets/js/45.8c740c98.js"><link rel="prefetch" href="/assets/js/46.250aba22.js"><link rel="prefetch" href="/assets/js/47.83ee64f1.js"><link rel="prefetch" href="/assets/js/48.8d559ee8.js"><link rel="prefetch" href="/assets/js/49.6eeaca4b.js"><link rel="prefetch" href="/assets/js/5.35f74ec6.js"><link rel="prefetch" href="/assets/js/50.6e5e287b.js"><link rel="prefetch" href="/assets/js/51.ff3ae70a.js"><link rel="prefetch" href="/assets/js/52.378b3b20.js"><link rel="prefetch" href="/assets/js/53.868673eb.js"><link rel="prefetch" href="/assets/js/54.3c62a57a.js"><link rel="prefetch" href="/assets/js/55.035ed35d.js"><link rel="prefetch" href="/assets/js/56.08925c33.js"><link rel="prefetch" href="/assets/js/57.5d073ed4.js"><link rel="prefetch" href="/assets/js/58.dce950e6.js"><link rel="prefetch" href="/assets/js/59.092c0de9.js"><link rel="prefetch" href="/assets/js/6.30b43e5d.js"><link rel="prefetch" href="/assets/js/60.8526ebe1.js"><link rel="prefetch" href="/assets/js/61.c02d2349.js"><link rel="prefetch" href="/assets/js/62.b93eeaf2.js"><link rel="prefetch" href="/assets/js/63.b363131d.js"><link rel="prefetch" href="/assets/js/64.0cda51e1.js"><link rel="prefetch" href="/assets/js/65.d26b33ae.js"><link rel="prefetch" href="/assets/js/66.d07350b7.js"><link rel="prefetch" href="/assets/js/67.85653372.js"><link rel="prefetch" href="/assets/js/7.7232d571.js"><link rel="prefetch" href="/assets/js/8.772a3a10.js"><link rel="prefetch" href="/assets/js/9.5f308baf.js">
    <link rel="stylesheet" href="/assets/css/0.styles.ae6ed136.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">MuiPlayer</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/guide/" class="nav-link router-link-active">
  Guide
</a></div><div class="nav-item"><a href="/demo/" class="nav-link">
  Demo
</a></div><div class="nav-item"><a href="/joinUs/" class="nav-link">
  Download
</a></div><div class="nav-item"><a href="https://gitee.com/muiplayer/hello-muiplayer" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Gitee
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Select language" class="dropdown-title"><span class="title">Languages</span> <span class="arrow down"></span></button> <button type="button" aria-label="Select language" class="mobile-dropdown-title"><span class="title">Languages</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/guide/plus-desktop-plugin.html" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  English
</a></li><li class="dropdown-item"><!----> <a href="/zh/guide/plus-desktop-plugin.html" class="nav-link">
  简体中文
</a></li></ul></div></div> <a href="https://github.com/muiplayer/hello-muiplayer" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/" class="nav-link router-link-active">
  Guide
</a></div><div class="nav-item"><a href="/demo/" class="nav-link">
  Demo
</a></div><div class="nav-item"><a href="/joinUs/" class="nav-link">
  Download
</a></div><div class="nav-item"><a href="https://gitee.com/muiplayer/hello-muiplayer" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Gitee
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Select language" class="dropdown-title"><span class="title">Languages</span> <span class="arrow down"></span></button> <button type="button" aria-label="Select language" class="mobile-dropdown-title"><span class="title">Languages</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/guide/plus-desktop-plugin.html" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  English
</a></li><li class="dropdown-item"><!----> <a href="/zh/guide/plus-desktop-plugin.html" class="nav-link">
  简体中文
</a></li></ul></div></div> <a href="https://github.com/muiplayer/hello-muiplayer" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>Guide</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/" aria-current="page" class="sidebar-link">Introduction</a></li><li><a href="/guide/begin.html" class="sidebar-link">Quick start</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/begin.html#installation" class="sidebar-link">installation</a></li><li class="sidebar-sub-header"><a href="/guide/begin.html#usage" class="sidebar-link">usage</a></li></ul></li><li><a href="/guide/api.html" class="sidebar-link">API</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/api.html#main-configuration" class="sidebar-link">Main configuration</a></li><li class="sidebar-sub-header"><a href="/guide/api.html#custom-configuration" class="sidebar-link">Custom configuration</a></li><li class="sidebar-sub-header"><a href="/guide/api.html#play-event-monitoring" class="sidebar-link">Play event monitoring</a></li><li class="sidebar-sub-header"><a href="/guide/api.html#player-interface" class="sidebar-link">Player interface</a></li></ul></li><li><a href="/guide/mui-player-desktop-plugin.html" class="sidebar-link">PC extension</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/mui-player-desktop-plugin.html#installation" class="sidebar-link">installation</a></li><li class="sidebar-sub-header"><a href="/guide/mui-player-desktop-plugin.html#start-using" class="sidebar-link">start using</a></li><li class="sidebar-sub-header"><a href="/guide/mui-player-desktop-plugin.html#configuration-options" class="sidebar-link">Configuration options</a></li><li class="sidebar-sub-header"><a href="/guide/mui-player-desktop-plugin.html#custom-settings-group-configuration" class="sidebar-link">Custom settings group configuration</a></li><li class="sidebar-sub-header"><a href="/guide/mui-player-desktop-plugin.html#customize-the-right-click-menu" class="sidebar-link">Customize the right click menu</a></li><li class="sidebar-sub-header"><a href="/guide/mui-player-desktop-plugin.html#action-event-monitoring" class="sidebar-link">Action event monitoring</a></li></ul></li><li><a href="/guide/plus-desktop-plugin.html" aria-current="page" class="active sidebar-link">Pc extend【Professional edition】</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/plus-desktop-plugin.html#download" class="sidebar-link">download</a></li><li class="sidebar-sub-header"><a href="/guide/plus-desktop-plugin.html#start-using" class="sidebar-link">start using</a></li><li class="sidebar-sub-header"><a href="/guide/plus-desktop-plugin.html#configuration-options-plus" class="sidebar-link">Configuration options plus</a></li><li class="sidebar-sub-header"><a href="/guide/plus-desktop-plugin.html#interface-plus" class="sidebar-link">Interface plus</a></li></ul></li><li><a href="/guide/plus-mobile-plugin.html" class="sidebar-link">Mobile extend【Professional edition】</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/plus-mobile-plugin.html#scan-qr-code" class="sidebar-link">Scan QR code</a></li><li class="sidebar-sub-header"><a href="/guide/plus-mobile-plugin.html#download" class="sidebar-link">download</a></li><li class="sidebar-sub-header"><a href="/guide/plus-mobile-plugin.html#start-using" class="sidebar-link">start using</a></li><li class="sidebar-sub-header"><a href="/guide/plus-mobile-plugin.html#configuration-options" class="sidebar-link">Configuration options</a></li><li class="sidebar-sub-header"><a href="/guide/plus-mobile-plugin.html#action-event-monitoring" class="sidebar-link">Action event monitoring</a></li></ul></li><li><a href="/guide/preset.html" class="sidebar-link">MediaSource support</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/preset.html#use-hls-js-or-flv-js" class="sidebar-link">Use hls.js or flv.js</a></li><li class="sidebar-sub-header"><a href="/guide/preset.html#configuration" class="sidebar-link">Configuration</a></li><li class="sidebar-sub-header"><a href="/guide/preset.html#custom-use-mse-library" class="sidebar-link">Custom use MSE library</a></li></ul></li><li><a href="/guide/thumbnails.html" class="sidebar-link">Video thumbnail</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/guide/barrage.html" class="sidebar-link">Video danmaku</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/barrage.html#use-commentcorelibrary" class="sidebar-link">Use CommentCoreLibrary</a></li></ul></li><li><a href="/guide/subtitle.html" class="sidebar-link">Video subtitles</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/guide/custom-control.html" class="sidebar-link">Custom player controls</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/custom-control.html#configuration-options" class="sidebar-link">Configuration options</a></li><li class="sidebar-sub-header"><a href="/guide/custom-control.html#example-1-customize-the-player-header-button" class="sidebar-link">Example 1: Customize the player header button</a></li><li class="sidebar-sub-header"><a href="/guide/custom-control.html#example-2-customize-the-buttons-at-the-bottom-of-the-player" class="sidebar-link">Example 2: Customize the buttons at the bottom of the player</a></li><li class="sidebar-sub-header"><a href="/guide/custom-control.html#example-3-customize-the-pop-up-window-on-the-right-sidebar" class="sidebar-link">Example 3: Customize the pop-up window on the right sidebar</a></li></ul></li><li><a href="/guide/uni-app.html" class="sidebar-link">Use in uni-app</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/guide/other-problem.html" class="sidebar-link">other problems</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="pc-extend【professional-edition】"><a href="#pc-extend【professional-edition】" class="header-anchor">#</a> Pc extend【Professional edition】</h1> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>PC side extension component, this extension adds more functional support for the player on the desktop side, including barrage input, ad floating window, video watermark, small window playback, progress point cue points, and video screenshots, etc.</p> <p>The plugin is written using native Js, so there is no redundancy in the code when writing the functional interface, which leads to an increase in the size of the package. Extension plugins are usually kept at the latest version, please update the main file of mui-player to the latest version before using this plugin.</p></div> <!----> <h2 id="download"><a href="#download" class="header-anchor">#</a> download</h2> <div class="custom-block warning"><p class="custom-block-title">Value added services</p> <p>This plugin is supported by the professional version, if you want to get the plug-in, please <a href="/joinUs/#value-added-services">click href</a> to view the professional version plug-in download.</p></div> <h2 id="start-using"><a href="#start-using" class="header-anchor">#</a> start using</h2> <p>Introduce <strong>mui-player-desktop-plugin.js</strong> on the page , the plugin needs to be loaded before initializing the player:</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!-- Introducing the &quot;Pro&quot; extension using tags --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text/javascript<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>js/mui-player-desktop-plugin.min.js<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>Pass in the main configuration item plugins:</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">var</span> mp <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">MuiPlayer</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    container<span class="token operator">:</span><span class="token string">'#mui-player'</span><span class="token punctuation">,</span>
    src<span class="token operator">:</span><span class="token string">'../media/media.mp4'</span><span class="token punctuation">,</span>
    <span class="token operator">...</span>
    
    plugins<span class="token operator">:</span><span class="token punctuation">[</span>
        <span class="token keyword">new</span> <span class="token class-name">MuiPlayerDesktopPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
            key<span class="token operator">:</span> <span class="token string">'Configure your plugin secret key'</span><span class="token punctuation">,</span>
            <span class="token operator">...</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="configuration-options-plus"><a href="#configuration-options-plus" class="header-anchor">#</a> Configuration options plus</h2> <p>Example to create a barrage input component:</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">new</span> <span class="token class-name">MuiPlayerDesktopPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    key<span class="token operator">:</span> <span class="token string">'Configure your plugin secret key'</span><span class="token punctuation">,</span>
    danmakuComponent<span class="token operator">:</span><span class="token punctuation">{</span>
        open<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// Whether to open the barrage component</span>
        growSize<span class="token operator">:</span> <span class="token number">0.65</span><span class="token punctuation">,</span> <span class="token comment">// The proportion of the width of the container that the component occupies, value range: 0 - 1</span>
        buttonText<span class="token operator">:</span> <span class="token string">'Send'</span><span class="token punctuation">,</span>
        <span class="token function">onSend</span><span class="token punctuation">(</span><span class="token parameter">text<span class="token punctuation">,</span> cleanText</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// Function callback to monitor text sent content</span>
            <span class="token comment">// axtion</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><table><thead><tr><th><strong>Attributes</strong></th> <th><strong>Type</strong></th> <th><strong>Default</strong></th> <th><strong>Description</strong></th></tr></thead> <tbody><tr><td>danmakuComponent</td> <td>Object</td> <td>{}</td> <td>Create a barrage input component</td></tr> <tr><td>danmakuComponent.open</td> <td>Object</td> <td>true</td> <td>Whether to open the barrage component</td></tr> <tr><td>danmakuComponent.growSize</td> <td>Number</td> <td>0.65</td> <td>The proportion of the width of the container that the component occupies, value range: 0 - 1</td></tr> <tr><td>danmakuComponent.position</td> <td>String</td> <td>left</td> <td>The position of the component arrangement, possible value: left | right | center</td></tr> <tr><td>danmakuComponent.buttonText</td> <td>String</td> <td>-</td> <td>The text displayed by the button</td></tr> <tr><td>danmakuComponent.placeholder</td> <td>String</td> <td>-</td> <td>The placeholder displayed in the bullet chat text input box</td></tr> <tr><td>danmakuComponent.onSend</td> <td>Function</td> <td>(text,cleanText)</td> <td>Function callback to listen to the sent content of the text, the method receives two callback parameters:<br>text：String - text content<br>cleanText：Function - Call the function to clear the content of the text input box</td></tr> <tr><td>danmakuComponent.loadIntercept</td> <td>Function</td> <td>(Element)</td> <td>Intercept before the component is loaded, usually here is an action to rewrite the component, and the callback function Element returns the control element</td></tr> <tr><td>danmakuComponent.style</td> <td>Object</td> <td>{}</td> <td>Additional styles for components</td></tr> <tr><td>#</td> <td></td> <td></td> <td></td></tr> <tr><td>prompt</td> <td>Object</td> <td></td> <td>progress bar pointer</td></tr> <tr><td>prompt.dotColor</td> <td>String</td> <td>#F8F8FF</td> <td>color</td></tr> <tr><td>prompt.hoverShow</td> <td>Boolean</td> <td>false</td> <td>whether to show only on mouseover</td></tr> <tr><td>prompt.items</td> <td>Array</td> <td>{}</td> <td>The progress bar indicates the point configuration item, and the elements in the array are passed into the configuration object including:<br>time: &lt;<code>Number</code>&gt; Time node/unit second<br>content: &lt;<code>String | Element</code>&gt; Hover content on mouse hover<br>style：&lt;<code>Object</code>&gt; Custom Item Styles</td></tr> <tr><td>#</td> <td></td> <td></td> <td></td></tr> <tr><td>seekLine</td> <td>Object</td> <td>true</td> <td>show addressing lines</td></tr> <tr><td>#</td> <td></td> <td></td> <td></td></tr></tbody></table> <h2 id="interface-plus"><a href="#interface-plus" class="header-anchor">#</a> Interface plus</h2> <table><thead><tr><th>Methods</th> <th>Type</th> <th>Default</th> <th>required</th> <th>Description</th></tr></thead> <tbody><tr><td>PopupAdvertise</td> <td>Function</td> <td></td> <td></td> <td>pop-up advertising floating window：<br><a href="##popup-advertising-floating-window">example</a></td></tr> <tr><td>PopupAdvertise.content</td> <td>HTMLElement | String</td> <td></td> <td>Y</td> <td>Advertising window content</td></tr> <tr><td>PopupAdvertise.style</td> <td>Object</td> <td>{}</td> <td></td> <td>Customize additional popup styles</td></tr> <tr><td>#</td> <td></td> <td></td> <td></td> <td></td></tr> <tr><td>addWatermark</td> <td>Function</td> <td></td> <td></td> <td>Add window playback watermark: <a href="#to-create-a-video-pre-roll-watermark">example</a></td></tr> <tr><td>addWatermark.image</td> <td>String</td> <td></td> <td>Y</td> <td>Image path to embed watermark</td></tr> <tr><td>addWatermark.scale</td> <td>Number</td> <td>1</td> <td></td> <td>Zoom ratio of watermark display</td></tr> <tr><td>addWatermark.position</td> <td>String</td> <td>top-right</td> <td></td> <td>The location where the watermark is displayed, optional:<code>top-right</code> <code>top-left</code> <code>bottom-left</code> <code>bottom-right</code></td></tr> <tr><td>#</td> <td></td> <td></td> <td></td> <td></td></tr> <tr><td>createRolling</td> <td>Function</td> <td></td> <td></td> <td>Create a window polling scrolling content prompt, parameter configuration:<br><a href="#create-a-window-polling-scrolling-content-prompt-marquee-effect">example</a></td></tr> <tr><td>createRolling.id</td> <td>String</td> <td></td> <td>Y</td> <td>The ID of scrolling playback, if you want to create multiple scrolling windows, this parameter must be declared</td></tr> <tr><td>createRolling.scrollamount</td> <td>Number</td> <td>6</td> <td></td> <td>Sets the length (in pixels) to move on each scroll</td></tr> <tr><td>createRolling.scrolldelay</td> <td>Number</td> <td>85</td> <td></td> <td>Set the time interval (in milliseconds) between each scroll</td></tr> <tr><td>createRolling.loop</td> <td>Number</td> <td>-1</td> <td></td> <td>Set the number of scrolling, the default value is −1, which means continuous scrolling</td></tr> <tr><td>createRolling.style</td> <td>Object</td> <td>{}</td> <td></td> <td>Custom add content scroll style</td></tr> <tr><td>createRolling.onstart</td> <td>Function</td> <td></td> <td></td> <td>Listener function, triggered once when creation starts scrolling</td></tr> <tr><td>createRolling.onfinish</td> <td>Function</td> <td></td> <td></td> <td>Listening function, triggered after scrolling, valid when loop != -1</td></tr> <tr><td>createRolling.stop</td> <td>Function</td> <td></td> <td></td> <td>pause scrolling</td></tr> <tr><td>createRolling.start</td> <td>Function</td> <td></td> <td></td> <td>start scrolling</td></tr> <tr><td>#</td> <td></td> <td></td> <td></td> <td></td></tr> <tr><td>screenshot</td> <td>Function</td> <td></td> <td></td> <td>Screenshot function to get the currently playing video frame: <a href="#get-the-video-frame-at-the-current-playing-time">example</a></td></tr> <tr><td>screenshot.width</td> <td>Number</td> <td>videoWidth</td> <td></td> <td>The width of the video capture canvas</td></tr> <tr><td>screenshot.height</td> <td>Number</td> <td>videoHeight</td> <td></td> <td>The height of the video canvas screenshot</td></tr> <tr><td>screenshot.quality</td> <td>Number</td> <td>0.92</td> <td></td> <td>Set the quality of jpegs image output, the value is 0 - 1</td></tr> <tr><td>screenshot.type</td> <td>String</td> <td>image/png</td> <td></td> <td>Output image format, optional:<code>image/png</code> <code>image/jpeg</code> <code>image/webp</code></td></tr> <tr><td>screenshot.scale</td> <td>Number</td> <td>devicePixelRatio</td> <td></td> <td>The zoom ratio of screenshot rendering, the value is 0 - 1</td></tr> <tr><td>screenshot.watermark</td> <td></td> <td>{ image, scale, position }</td> <td></td> <td>Add a screenshot watermark, the parameter configuration is the same as <code>addWatermark</code> functional interface</td></tr> <tr><td>screenshot.onDone</td> <td>Function</td> <td>{ base64, currentTime, download }</td> <td></td> <td>callback function on completion</td></tr> <tr><td>screenshot.onFail</td> <td>Function</td> <td>(error)</td> <td></td> <td>callback function on failure</td></tr> <tr><td>#</td> <td></td> <td></td> <td></td> <td></td></tr> <tr><td>switchMiniPlayer</td> <td>Function</td> <td>(open, option)</td> <td></td> <td>Open/close small window playback, function delivery<code>open &lt;Boolean&gt;</code> Indicates to open or close the small window to play, <code>option &lt;Object&gt;</code> Pass all widget configurable parameters: <a href="#small-window-play">example</a></td></tr> <tr><td>switchMiniPlayer.width</td> <td>Number | String</td> <td>400</td> <td></td> <td>Small window width</td></tr> <tr><td>switchMiniPlayer.height</td> <td>Number | String</td> <td>auto</td> <td></td> <td>Small window height</td></tr> <tr><td>switchMiniPlayer.bottom</td> <td>Number | String</td> <td>50</td> <td></td> <td>Position the distance from the bottom of the window</td></tr> <tr><td>switchMiniPlayer.right</td> <td>Number | String</td> <td>50</td> <td></td> <td>The distance to the right of the positioning window</td></tr> <tr><td>switchMiniPlayer.keepPlayerLayer</td> <td>Boolean</td> <td>true</td> <td></td> <td>Protect the size of the player's parent container</td></tr> <tr><td>switchMiniPlayer.transition</td> <td>Boolean</td> <td>true</td> <td></td> <td>Whether to open the small window animation</td></tr> <tr><td>switchMiniPlayer.transitionDuration</td> <td>Number</td> <td>0.35</td> <td></td> <td>animation time</td></tr> <tr><td>switchMiniPlayer.transitionTiming</td> <td>String</td> <td>ease</td> <td></td> <td>transition effects for animation</td></tr> <tr><td>#</td> <td></td> <td></td> <td></td> <td></td></tr> <tr><td>createSettingPopup</td> <td>Function</td> <td></td> <td></td> <td>Create and pop up an option settings window:<a href="#create-and-pop-up-an-option-setting-window">example</a></td></tr> <tr><td>createSettingPopup.name</td> <td>String</td> <td></td> <td>Y</td> <td>Popup ID</td></tr> <tr><td>createSettingPopup.configs</td> <td>Array</td> <td></td> <td>Y</td> <td>Configuration items, configuration rules reference:     <br><a href="/guide/mui-player-desktop-plugin.html#custom-settings-group-configuration">Custom settings group</a></td></tr> <tr><td>createSettingPopup.offseDistance</td> <td>Number</td> <td>0</td> <td></td> <td>Specifies the popup offset distance</td></tr> <tr><td>#</td> <td></td> <td></td> <td></td> <td></td></tr></tbody></table> <h4 id="popup-advertising-floating-window"><a href="#popup-advertising-floating-window" class="header-anchor">#</a> popup advertising floating window</h4> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// Dynamically create the content of the pop-up advertising floating window</span>
<span class="token keyword">var</span> vnode <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'img'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
vnode<span class="token punctuation">.</span>src <span class="token operator">=</span> <span class="token string">'../static/ads.jpg'</span><span class="token punctuation">;</span>
vnode<span class="token punctuation">.</span>style<span class="token punctuation">.</span>width <span class="token operator">=</span> <span class="token string">'100%'</span><span class="token punctuation">;</span>
vnode<span class="token punctuation">.</span>style<span class="token punctuation">.</span>height <span class="token operator">=</span> <span class="token string">'100%'</span><span class="token punctuation">;</span>
vnode<span class="token punctuation">.</span><span class="token function-variable function">onclick</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    e<span class="token punctuation">.</span><span class="token function">stopPropagation</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'on click action...'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

mp<span class="token punctuation">.</span><span class="token function">popupAdvertise</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    content<span class="token operator">:</span> vnode<span class="token punctuation">,</span>
    style<span class="token operator">:</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h4 id="to-create-a-video-pre-roll-watermark"><a href="#to-create-a-video-pre-roll-watermark" class="header-anchor">#</a> To create a video pre-roll watermark</h4> <div class="language-javascript extra-class"><pre class="language-javascript"><code>mp<span class="token punctuation">.</span><span class="token function">addWatermark</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    image<span class="token operator">:</span> <span class="token string">'https://muiplayer.oss-cn-shanghai.aliyuncs.com/static/image/logot.png'</span><span class="token punctuation">,</span>
    scale<span class="token operator">:</span> <span class="token number">0.5</span><span class="token punctuation">,</span>
    position<span class="token operator">:</span><span class="token string">'top-right'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h4 id="create-a-window-polling-scrolling-content-prompt-marquee-effect"><a href="#create-a-window-polling-scrolling-content-prompt-marquee-effect" class="header-anchor">#</a> Create a window polling scrolling content prompt (marquee effect)</h4> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">var</span> rolling <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">mp<span class="token punctuation">.</span>createRolling</span><span class="token punctuation">(</span>content <span class="token punctuation">,</span><span class="token punctuation">{</span>
    id<span class="token operator">:</span> <span class="token string">'warning'</span><span class="token punctuation">,</span>
    scrollamount<span class="token operator">:</span><span class="token number">6</span><span class="token punctuation">,</span> <span class="token comment">// Sets the length (in pixels) to move on each scroll</span>
    scrolldelay<span class="token operator">:</span><span class="token number">85</span><span class="token punctuation">,</span> <span class="token comment">// Set the time interval (in milliseconds) between each scroll</span>
    loop<span class="token operator">:</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token comment">// Set the number of scrolling, the default value is −1, which means continuous scrolling.</span>
    style<span class="token operator">:</span><span class="token punctuation">{</span>
        paddingBottom<span class="token operator">:</span> <span class="token string">'25px'</span><span class="token punctuation">,</span>
        paddingTop<span class="token operator">:</span> <span class="token string">'25px'</span><span class="token punctuation">,</span>
        textShadow<span class="token operator">:</span> <span class="token string">'0px 0px 3px rgb(0 0 0)'</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

rolling<span class="token punctuation">.</span><span class="token function">onstart</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Rolling Start...'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

rolling<span class="token punctuation">.</span><span class="token function">onfinish</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Rolling Finish...'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// rolling.stop(); // pause scrolling</span>
<span class="token comment">// rolling.start(); // start scrolling</span>
</code></pre></div><h4 id="get-the-video-frame-at-the-current-playing-time"><a href="#get-the-video-frame-at-the-current-playing-time" class="header-anchor">#</a> Get the video frame at the current playing time</h4> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">/**
* Get a screenshot of the video at the current playing time
* Note: Some HTML elements set support for CORS, such as: &lt;img&gt;, &lt;audio&gt;, &lt;video&gt; tags, etc., which means that calling the screenshot screenshot method may cause cross-domain behaviors that are not supported! The same-origin security policy may be supported, and the crossOrigin attribute of the element is set at the same time
* refer to：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Attributes/crossorigin
*/</span>
mp<span class="token punctuation">.</span><span class="token function">screenshot</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    quality<span class="token operator">:</span> <span class="token number">0.92</span><span class="token punctuation">,</span>
    type<span class="token operator">:</span> <span class="token string">'image/jpeg'</span><span class="token punctuation">,</span>
    scale<span class="token operator">:</span><span class="token number">0.5</span><span class="token punctuation">,</span>
    watermark<span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">// Add screenshot watermark</span>
        image<span class="token operator">:</span> <span class="token string">'https://muiplayer.oss-cn-shanghai.aliyuncs.com/static/image/logot.png'</span><span class="token punctuation">,</span>
        scale<span class="token operator">:</span> <span class="token number">0.75</span><span class="token punctuation">,</span>
        position<span class="token operator">:</span><span class="token string">'top-right'</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function-variable function">onDone</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">let</span> <span class="token punctuation">{</span> base64<span class="token punctuation">,</span> currentTime<span class="token punctuation">,</span> download <span class="token punctuation">}</span> <span class="token operator">=</span> data<span class="token punctuation">;</span>
        <span class="token function">download</span><span class="token punctuation">(</span><span class="token string">'File Name'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function-variable function">onFail</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span><span class="token string">'screenshot error...'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h4 id="small-window-play"><a href="#small-window-play" class="header-anchor">#</a> small window play</h4> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// open small window</span>
mp<span class="token punctuation">.</span><span class="token function">switchMiniPlayer</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
    width<span class="token operator">:</span> <span class="token number">400</span><span class="token punctuation">,</span>
    height<span class="token operator">:</span> <span class="token string">'auto'</span><span class="token punctuation">,</span>
    bottom<span class="token operator">:</span> <span class="token number">50</span><span class="token punctuation">,</span>
    right<span class="token operator">:</span> <span class="token number">50</span><span class="token punctuation">,</span>
    keepPlayerLayer<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    transition<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    transitionDuration<span class="token operator">:</span> <span class="token number">0.35</span><span class="token punctuation">,</span>
    transitionTiming<span class="token operator">:</span> <span class="token string">'ease'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// close the window</span>
mp<span class="token punctuation">.</span><span class="token function">switchMiniPlayer</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h4 id="create-and-pop-up-an-option-setting-window"><a href="#create-and-pop-up-an-option-setting-window" class="header-anchor">#</a> Create and pop up an option setting window</h4> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">var</span> danmakuConfigs <span class="token operator">=</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
        functions<span class="token operator">:</span><span class="token string">'Danmaku'</span><span class="token punctuation">,</span>
        model<span class="token operator">:</span><span class="token string">'switch'</span><span class="token punctuation">,</span>
        selected<span class="token operator">:</span><span class="token boolean">true</span><span class="token punctuation">,</span>
        <span class="token function-variable function">onToggle</span><span class="token operator">:</span><span class="token punctuation">(</span><span class="token parameter">data<span class="token punctuation">,</span> selected<span class="token punctuation">,</span> back</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
        functions<span class="token operator">:</span><span class="token string">'Font size'</span><span class="token punctuation">,</span>
        childConfig<span class="token operator">:</span><span class="token punctuation">[</span>
            <span class="token punctuation">{</span> functions<span class="token operator">:</span><span class="token string">'12 PX'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">{</span> functions<span class="token operator">:</span><span class="token string">'16 PX'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">{</span> functions<span class="token operator">:</span><span class="token string">'18 PX'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">{</span> functions<span class="token operator">:</span><span class="token string">'25 PX'</span><span class="token punctuation">,</span>selected<span class="token operator">:</span><span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">{</span> functions<span class="token operator">:</span><span class="token string">'36 PX'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">{</span> functions<span class="token operator">:</span><span class="token string">'45 PX'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">{</span> functions<span class="token operator">:</span><span class="token string">'64 PX'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">]</span><span class="token punctuation">,</span>
        <span class="token function-variable function">onToggle</span><span class="token operator">:</span><span class="token punctuation">(</span><span class="token parameter">data<span class="token punctuation">,</span> selected<span class="token punctuation">,</span> back</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span>

mp<span class="token punctuation">.</span><span class="token function">createSettingPopup</span><span class="token punctuation">(</span>event<span class="token punctuation">,</span> <span class="token punctuation">{</span>
    name<span class="token operator">:</span> <span class="token string">'danmakuConfigs'</span><span class="token punctuation">,</span> <span class="token comment">// Specified name, required</span>
    configs<span class="token operator">:</span> danmakuConfigs<span class="token punctuation">,</span> <span class="token comment">// configuration items</span>
    offseDistance<span class="token operator">:</span> <span class="token number">47</span><span class="token punctuation">,</span> <span class="token comment">// Specifies the popup offset distance</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/muiplayer/hello-muiplayer/edit/master/docs/docs/guide/plus-desktop-plugin.md" target="_blank" rel="noopener noreferrer">Help us improve this page!</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">1/23/2023, 11:15:00 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/guide/mui-player-desktop-plugin.html" class="prev">
        PC extension
      </a></span> <span class="next"><a href="/guide/plus-mobile-plugin.html">
        Mobile extend【Professional edition】
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"><!----><!----></div></div>
    <script src="/assets/js/app.3641bd26.js" defer></script><script src="/assets/js/23.35f66f6c.js" defer></script><script src="/assets/js/3.67a24b41.js" defer></script><script src="/assets/js/37.262c376a.js" defer></script><script src="/assets/js/15.78fdfcaf.js" defer></script>
  </body>
</html>
